<template>
    <view class="page">
        <!-- 优惠券兑换 -->
        <view class="banner-title" v-if="ExchangeType == 0">
            <view class="banner">
                <!-- <image src="/static/coupon_default.png" mode=""></image> -->
            </view>
            <view class="title">
                <view class="name">10元直减优惠券</view>
                <view class="describe">领券当日开始90天内有效</view>
            </view>
            <view class="integral-title">
                <view class="integral">
                    <text class="action">1000</text>
                    <text>积分</text>
                </view>
                <view class="integral">
                    <text>剩余</text>
                    <text class="action">1000</text>
                    <text>件</text>
                </view>
            </view>
        </view>
        <!-- 商品兑换 -->
        <view class="banner-goods" v-else>
            <view class="banner">
                <swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
                    <swiper-item v-for="(item, index) in swiperList" :key="index">
                        <image :src="item.url" mode="widthFix"></image>
                    </swiper-item>
                </swiper>
            </view>
            <view class="goods-title">
                <view class="title-vip">
                    <view class="title">
                        <text>荣耀20青春版 AMOLED屏幕指纹 4000mAh大电池 20W快充 4800万 手机 4GB+64GB 冰岛幻境</text>
                    </view>
                    <view class="vip">
                        <text>超级会员</text>
                    </view>
                </view>
                <view class="integral-title">
                    <view class="integral">
                        <text class="action">10000</text>
                        <text>积分</text>
                    </view>
                    <view class="integral">
                        <text>剩余</text>
                        <text class="action">1000</text>
                        <text>件</text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 兑换须知 -->
        <view class="convertible-notes">
            <view class="title">兑换须知</view>
            <view class="content">
                <view>1、领券当日开始90天内有效;</view>
                <view>2、本优惠券限量1000件/期，兑完即止;</view>
                <view>3、部分新品、特价商品、拼团特惠、限时特惠和超级会员特价商品不可使用;</view>
                <view>4、优惠券兑换后，不可取消兑换并返还积分。</view>
            </view>
        </view>
        <!-- 兑换按钮 -->
        <view class="exchange-btn">
            <view class="btn" @click="isExchange = true">立即兑换</view>
        </view>
        <!-- 兑换弹窗 -->
        <view class="exchange-win">
            <view class="cu-modal" :class="{'show':isExchange}">
                <view class="cu-dialog">
                    <view class="bg-img" style="background-image: url('/static/img/banner_04.png');height:200px;">
                        <view class="cu-bar justify-end text-white">
                            <view class="action">
                                <text class="cuIcon-close" @click="isExchange = false"></text>
                            </view>
                        </view>
                    </view>
                    <view class="goods-title">
                        <view class="title-vip">
                            <view class="title">
                                <text class="two-omit">荣耀20青春版 AMOLED屏幕指纹 4000mAh大电池 20W快充 4800万 手机 4GB+64GB 冰岛幻境</text>
                            </view>
                            <view class="vip">
                                <text>超级会员</text>
                            </view>
                        </view>
                        <view class="integral-title">
                            <view class="integral">
                                <text class="action">10000</text>
                                <text>积分</text>
                            </view>
                            <view class="integral">
                                <text>剩余</text>
                                <text class="action">1000</text>
                                <text>件</text>
                            </view>
                        </view>
                    </view>
                    <view class="delivery-address">
                        <view class="title">收货地址</view>
                        <view class="address-phone">
                            <view class="icon">
                                <text class="iconfont icon-dingwei1"></text>
                            </view>
                            <view class="address">
                                <view class="location">
                                    <text class="one-omit">南山区科苑路15号科兴科学园</text>
                                </view>
                                <view class="name-phone">
                                    <text>王哈哈</text>
                                    <text>188****8888</text>
                                </view>
                            </view>
                            <view class="more">
                                <text class="iconfont icon-more"></text>
                            </view>
                        </view>
                    </view>
                    <view class="affirm-btn">
                        <view class="btn" @click="onAffirm">确认</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            ExchangeType: 0,
            isExchange: false,
            swiperList: [
                {
                    id: 0,
                    type: 'image',
                    url: '/static/img/banner_01.png'
                },
                {
                    id: 1,
                    type: 'image',
                    url: '/static/img/banner_02.png'
                },
                {
                    id: 2,
                    type: 'image',
                    url: '/static/img/banner_03.png'
                },
                {
                    id: 3,
                    type: 'image',
                    url: '/static/img/banner_04.png'
                },
                {
                    id: 4,
                    type: 'image',
                    url: '/static/img/banner_01.png'
                },
                {
                    id: 5,
                    type: 'image',
                    url: '/static/img/banner_01.png'
                }
            ],
        };
    },
    onLoad(params) {
        this.ExchangeType = params.type || 0;
    },
    methods: {
        /**
         * 兑换确认点击
         */
        onAffirm() {
            uni.navigateTo({
                url: '/pagesA/my/exchangeResult?type=' + this.ExchangeType,
            })
        }
    }
}
</script>

<style scoped lang="scss">
.page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
}

/* 优惠券兑换 */
.banner-title {
    width: 100%;
    height: 420rpx;
    background-color: #ffffff;
    border-radius: 0 0 20rpx 20rpx;
    .banner {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200rpx;
        height: 200rpx;
        margin: 0 auto;
        background-color: $base;
        border-radius: 100%;
        image {
            width: 120rpx;
            height: 120rpx;
        }
    }
    .title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 140rpx;
        .name {
            font-size: 32rpx;
            font-weight: bold;
            color: #222222;
        }
        .describe {
            font-size: 24rpx;
            color: #959595;
            margin-top: 10rpx;
        }
    }
    .integral-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 4%;
        height: 80rpx;
        .integral {
            display: flex;
            align-items: center;
            text {
                font-size: 24rpx;
                color: #959595;
            }
            .action {
                font-size: 32rpx;
                font-weight: bold;
                color: $base;
                margin-right: 10rpx;
            }
        }
    }
}

/* 商品兑换 */
.banner-goods {
    width: 100%;
    background-color: #ffffff;
    border-radius: 0 0 20rpx 20rpx;
    .banner {
        width: 100%;
        height: 360rpx;
        overflow: hidden;
        .screen-swiper {
            width: 100%;
            height: 100%;
            image {
                width: 100%;
                height: 100%;
            }
        }
    }
    .goods-title {
        width: 100%;
        padding: 20rpx;
        border-bottom: 2rpx solid #f6f6f6;
        .title-vip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .title {
                display: flex;
                align-items: center;
                text-align: left;
                width: 70%;
                text {
                    font-size: 26rpx;
                    font-weight: bold;
                    color: #222222;
                }
            }
            .vip {
                display: flex;
                align-items: center;
                text {
                    padding: 6rpx 12rpx;
                    font-size: 24rpx;
                    color: #ff9900;
                    border: 2rpx solid #ff9900;
                    border-radius: 200rpx;
                }
            }
        }
        .integral-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 4%;
            height: 80rpx;
            .integral {
                display: flex;
                align-items: center;
                text {
                    font-size: 24rpx;
                    color: #959595;
                }
                .action {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: $base;
                    margin-right: 10rpx;
                }
            }
        }
    }
}

/* 兑换须知 */
.convertible-notes {
    width: 100%;
    background-color: #ffffff;
    margin: 20rpx auto;
    border-radius: 20rpx;
    padding-bottom: 20rpx;
    .title {
        display: flex;
        align-items: center;
        padding: 0 4%;
        height: 80rpx;
        font-size: 28rpx;
        font-weight: bold;
    }
    .content {
        padding: 0 4%;
        font-size: 26rpx;
        color: #555555;
        line-height: 50rpx;
    }
}

/* 兑换按钮 */
.exchange-btn {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100rpx;
    background-color: #ffffff;
    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90%;
        height: 70rpx;
        font-size: 28rpx;
        color: #ffffff;
        background: linear-gradient($base, $change-clor);
        box-shadow: 0 2px 5px $base;
        border-radius: 70rpx;
    }
}

/* 兑换弹窗 */
.exchange-win {
    .goods-title {
        width: 100%;
        padding: 20rpx;
        border-bottom: 2rpx solid #eeeeee;
        .title-vip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .title {
                display: flex;
                align-items: center;
                width: 70%;
                height: 100rpx;
                text {
                    font-size: 26rpx;
                    font-weight: bold;
                    color: #222222;
                    text-align: left;
                }
            }
            .vip {
                display: flex;
                align-items: center;
                text {
                    padding: 6rpx 12rpx;
                    font-size: 24rpx;
                    color: #ff9900;
                    border: 2rpx solid #ff9900;
                    border-radius: 200rpx;
                }
            }
        }
        .integral-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 4%;
            height: 80rpx;
            .integral {
                display: flex;
                align-items: center;
                text {
                    font-size: 24rpx;
                    color: #959595;
                }
                .action {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: $base;
                    margin-right: 10rpx;
                }
            }
        }
    }
    .delivery-address {
        padding: 0 4%;
        height: 200rpx;
        .title {
            display: flex;
            align-items: center;
            width: 100%;
            height: 80rpx;
            font-size: 28rpx;
            font-weight: bold;
            color: #555555;
        }
        .address-phone {
            display: flex;
            align-items: center;
            width: 100%;
            height: 120rpx;
            .icon {
                display: flex;
                align-items: center;
                width: 10%;
                height: 100%;
                text {
                    font-size: 38rpx;
                }
            }
            .address {
                width: 80%;
                height: 100%;
                .location {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    height: 50%;
                    text {
                        font-size: 26rpx;
                        color: #222222;
                    }
                }
                .name-phone {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    text {
                        font-size: 26rpx;
                        color: #959595;
                    }
                }
            }
            .more {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                width: 10%;
                height: 100%;
                text {
                    font-size: 32rpx;
                    color: #959595;
                }
            }
        }
    }
    .affirm-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100rpx;
        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90%;
            height: 60rpx;
            font-size: 28rpx;
            color: #ffffff;
            background: linear-gradient($base, $change-clor);
            box-shadow: 0 2px 5px $base;
            border-radius: 70rpx;
        }
    }
}
</style>
